<template>
  <view class="page">
    <view class="nav">
      <text class="title">我的下载</text>
    </view>
    <view class="list">
      <view class="item" v-for="(f, idx) in files" :key="idx">
        <view class="item-left">
          <t-icon name="file-pdf" size="28" />
          <view class="meta">
            <text class="name">{{ f.name }}</text>
            <text class="sub"
              >{{ formatSize(f.size) }} | {{ formatDate(f.time) }}</text
            >
          </view>
        </view>
        <view class="item-actions">
          <t-button size="small" theme="primary" @tap="openFile(f)"
            >下载</t-button
          >
          <t-button
            size="small"
            variant="outline"
            open-type="share"
            style="margin-left: 12rpx"
            >分享</t-button
          >
        </view>
      </view>
      <view v-if="files.length === 0" class="empty">暂无记录</view>
    </view>
  </view>
</template>

<script>
import { listDownloadRecords } from "../../services/files";
export default {
  data() {
    return { files: [] };
  },
  onShow() {
    this.files = listDownloadRecords();
  },
  methods: {
    /** 返回上一页 */
    goBack() {
      uni.navigateBack();
    },
    /** 打开已保存的PDF */
    openFile(f) {
      const p = f.savedPath;
      if (!p) {
        uni.showToast({ title: "文件未保存", icon: "none" });
        return;
      }
      wx.openDocument({ filePath: p, fileType: "pdf", showMenu: true });
    },
    /** 格式化时间 */
    formatDate(ts) {
      const d = new Date(ts || Date.now());
      const pad = (n) => String(n).padStart(2, "0");
      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
    },
    /** 格式化大小 */
    formatSize(s) {
      if (typeof s === "number") {
        return (s / 1024 / 1024).toFixed(1) + "MB";
      }
      return String(s || "-");
    },
  },
};
</script>

<style>
.page {
  padding: 24rpx;
}
.nav {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.title {
  font-size: 32rpx;
  font-weight: 600;
}
.list {
  margin-top: 24rpx;
}
.item {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}
.item-left {
  display: flex;
  gap: 16rpx;
  align-items: center;
}
.meta {
  display: flex;
  flex-direction: column;
}
.name {
  font-size: 28rpx;
  font-weight: 600;
}
.sub {
  color: #8c8c8c;
  font-size: 24rpx;
}
.empty {
  color: #8c8c8c;
  text-align: center;
  padding: 40rpx 0;
}
</style>
